<template>
  <div class="weather-list">
    <div class="weather-list-row">
      <div
        v-for="(weather, index) in weatherData"
        :key="index"
        class="today-weather"
      >
        <span>{{ weather.date }}</span>
        <span>{{ weather.condition }}</span>
        <span>风力 {{ weather.wind }}</span>
      </div>
    </div>
    <div class="weathercanvas">
      <div ref="weatherChart" class="weather-chart"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

const weatherData = ref([
  {
    date: "今天 05-17",
    condition: "阴",
    wind: "4级",
    dayTemp: 30,
    nightTemp: 18,
  },
  {
    date: "明天 05-18",
    condition: "多云",
    wind: "1-3级",
    dayTemp: 27,
    nightTemp: 17,
  },
  {
    date: "周一 05-19",
    condition: "晴",
    wind: "1-3级",
    dayTemp: 33,
    nightTemp: 21,
  },
  {
    date: "周二 05-20",
    condition: "晴",
    wind: "1-3级",
    dayTemp: 32,
    nightTemp: 23,
  },
]);

const weatherChart = ref(null);

onMounted(() => {
  const chartDom = weatherChart.value;
  const myChart = echarts.init(chartDom);

  const option = {
    tooltip: {
      /*  trigger: "axis", */
      formatter: (params) => {
        const date = params[0].name;
        const dayTemp = params[0].value;
        const nightTemp = params[1].value;
        return `<div>日期: ${date}</div>
                <div>白天温度: 白${dayTemp}℃</div>
                <div>晚上温度: 晚${nightTemp}℃</div>`;
      },
    },
    grid: {
      top: 20,
      left: 30,
      right: 30,
      bottom: 20,
    },
    xAxis: {
      type: "category",
      data: weatherData.value.map((item) => item.date),
      show: false,
    },
    yAxis: {
      type: "value",
      show: false,
    },
    series: [
      {
        name: "白天温度",
        type: "line",
        data: weatherData.value.map((item) => item.dayTemp),
        itemStyle: {
          color: "purple",
        },
        label: {
          show: true,
          formatter: (params) => `白${params.value}℃`,
          position: "top",
          textStyle: {
            color: "white",
          },
        },
      },
      {
        name: "晚上温度",
        type: "line",
        data: weatherData.value.map((item) => item.nightTemp),
        itemStyle: {
          color: "green",
        },
        label: {
          show: true,
          formatter: (params) => `晚${params.value}℃`,
          position: "bottom",
          textStyle: {
            color: "white",
          },
        },
      },
    ],
  };

  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
.weather-list {
  position: relative;
  width: 100%;
  min-height: 342px;
  justify-content: center;
  background-color: rgba(0, 78, 113, 0.9);

  .weather-list-row {
    display: flex;
    width: 1120px;
    margin: 0 auto;
    gap: 20px;

    .today-weather {
      width: 265px;
      height: 144px;
      box-sizing: border-box;
      border: none;
      border-radius: 0;
      box-shadow: none;
      margin-top: 25px;

      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
      justify-content: center;
    }
  }

  .weathercanvas {
    position: absolute;
    width: 1120px;
    height: 160px;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);

    background-color: rgba(0, 78, 113, 0.9);

    .weather-chart {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 78, 113, 0.9);
      color: white;
    }
  }
}
</style>
